<template>
  <div id="view-activity_detail">
    <Aside :menuItems="asideAttrs.menuItems" :title="asideAttrs.title">
      <div display="flex">
        <DetailCard v-bind="data"> </DetailCard>
      </div>
    </Aside>
  </div>
</template>

<script>
import Aside from "../../components/aside/aside";
import DetailCard from "../../components/activitydetail/detail-card";
import requestUtils from "../../utils/requestUtils";

export default {
  name: "Home",
  components: {
    Aside,
    DetailCard,
  },
  created: function () {
    this.activityId = parseInt(this.$route.params.activityId);
    requestUtils.requestActivityDetail(
      this,
      this.activityId,
      this.getDetailSuccess,
      this.requestFail
    );
  },
  methods: {
    getPublisherSuccess: function (res) {
      console.log("getPublisherSuccess:", res);
      let avatar;
      if (res.data.result.avatar === "") {
        avatar =
          "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png";
      } else {
        avatar = `${this.GLOBAL.site}/` + res.data.result.avatar;
      }
      res.data.result.avatar = avatar;
      this.data.publisherInfo = res.data.result;
      console.log("publisheInfo", this.data.publisherInfo);
    },
    getDetailSuccess: function (res) {
      console.log("getDetailSuccess:", res);
      this.data.activityInfo = res.data.result;
      if (this.data.activityInfo.activityBanners.length <= 0) {
        var banner = `${this.GLOBAL.site}/`;
        banner += "banner/defaultBanner.jpg";
        let picture = { url: banner, width: 410, height: 260 };
        this.data.pictures = [picture, picture, picture];
      } else {
        this.data.pictures = this.data.activityInfo.activityBanners.map(
          (value) => {
            value.url = `${this.GLOBAL.site}/` + value.url;
            return value;
          }
        );
      }
      console.log("activity-detail,pics:", this.data.pictures);
      requestUtils.requestUserInfo(
        this,
        this.data.activityInfo.publisherId,
        this.getPublisherSuccess,
        this.requestFail
      );
    },
    requestFail: function (error) {
      console.log("requestFail:", error);
      this.$message.error("获取活动信息失败");
    },
  },
  data() {
    return {
      asideAttrs: {
        title: "WeParty",
        menuItems: [
          {
            iconType: "fire",
            iconTheme: "filled",
            name: "Popular",
            link: "/popular",
          },
          {
            iconType: "thunderbolt",
            iconTheme: "filled",
            name: "Latest",
            link: "/latest",
          },
          {
            iconType: "star",
            iconTheme: "filled",
            name: "Liked",
            link: "/liked",
          },
          {
            iconType: "flag",
            iconTheme: "filled",
            name: "Publish Activity",
            link: "/publish",
          },
        ],
      },
      activityId: -1,
      data: {
        pictures: [],

        activityInfo: {
          activityId: 1,
          activityName: "未知的活动名称loading...",
          activityLocation: "未知的地点loading...",
          activityStart: 0,
          activityEnd: 0,
          activityProfile: "未知的简介内容loading...",
          activityKind: "OTHERS",
          activityPic: "",
          joinNum: 0,
          publisherId: 1,
          activityBanners: [],
        },
        publisherInfo: {
          id: 1,
          userName: "user123321",
          userNumber: "3018216157",
          phoneNumber: "3018216157",
          age: -1,
          gender: "",
          avatar: "",
          password: "",
        },
      },
    };
  },
};
</script>

<style lang="less" scope>
#view-activity_detail {
  height: 100%;
  width: 100%;
}
</style>